<template>
  <div
    v-loading="baLoading"
    class="basic-attributes card-billmaterials-scroll"
  >
    <dynamic-from
      ref="dFrom"
      :from-data="baFromData"
      :fixed-field-val="fixedFieldVal"
      :is-fixed-field="true"
      :is-edit="isEdit"
      class="from"
    >
    </dynamic-from>
    <div class="operate">
      <i v-if="!isEdit" class="iconfont iconicon_save" @click="save"></i>
      <i v-if="!isEdit" class="iconfont iconicon_cancel" @click="cancel"></i>
      <i v-if="isEdit" class="iconfont iconicon_edit" @click="edit"></i>
    </div>
  </div>
</template>

<script>
import DynamicFrom from '@/components/frontPage/DynamicFrom'
import {
  getQueryBaseAttribute,
  postQueryListSelectData,
  putBAUpdate
} from '@/api/frontPage/document/index'
import actionlog from '@/utils/actionlog.js'
export default {
  name: 'BasicAttributes',
  components: { DynamicFrom },
  props: {
    id: {
      type: String,
      default: 'b1c03f0e599cda8edb5d3a03bb0cc994'
    },
    fixedFieldVal: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isEdit: true,
      baLoading: false,
      baFromData: [],
      saveActionlog: {
        instanceId: '', // 对应选中的id
        route: this.$route, // 当前路由信息
        typeObj: { // 埋点类型
          value: '02',
          name: '修改',
          specificTypeName: '修改基本属性' // 具体操作的类型
        },
        valObj: {
          newVal: {}, // 最新的值 需要赋值
          oldVal: {}, // 之前的值 // 修改需要
          labelVal: {} // 属性名称
        },
        fileName: [] // 下载，预览，签出，签入，取消签出，添加附件，导出 需要传
      }
    }
  },
  watch: {
    fixedFieldVal: {
      handler(newVal, oldVal) {
        if (newVal.description || newVal.unit) {
          this.saveActionlog.valObj.oldVal.description = newVal.description
          this.saveActionlog.valObj.oldVal.unit = newVal.unit
        }
      },
      immediate: true,
      deep: true
    },
    id: {
      handler(newVal, oldVal) {
        this.saveActionlog.instanceId = newVal
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.initBasicAttributes()
  },
  mounted() {
  },
  methods: {
    // 动态表单数据
    initBasicAttributes() {
      this.baLoading = true
      this.baFromData = []

      // 埋点需要
      this.saveActionlog.valObj.oldVal = {}
      const labelVal = {
        description: '描述',
        unit: '单位'
      }
      getQueryBaseAttribute(this.id).then(res => {
        const result = res.result.fontControllers
        result.forEach((item, k) => {
          // 埋点需要
          this.saveActionlog.valObj.oldVal[item.name] = item.value
          labelVal[item.name] = item.label

          if (item.code !== null && item.code) {
            this.getCodeSelect(item.code).then(vals => {
              item.options = vals
            })
          }
        })
        this.saveActionlog.valObj.labelVal = labelVal

        this.baFromData = result
        this.baLoading = false
      }).catch(() => {
        this.baFromData = []
        this.baLoading = false
      })
    },
    // 根据列表code获取列表值的下拉数据
    async getCodeSelect(code) {
      const val = await postQueryListSelectData(code)
      return val.result
    },
    save() {
      this.$refs.dFrom.$refs.dynamicForm.validate((valid) => {
        if (valid) {
          const formVal = JSON.parse(JSON.stringify(this.$refs.dFrom.form))

          // 埋点需要
          this.saveActionlog.valObj.newVal = formVal

          const params = {
            attribute: formVal,
            description: formVal.description,
            unit: formVal.unit,
            id: this.id
          }
          this.$emit('save', formVal)
          putBAUpdate(params).then(res => {
            this.isEdit = true
            this.$message({ message: '保存成功', type: 'success' })

            // 埋点
            actionlog(this.saveActionlog)
          })
        }
      })
    },
    cancel() {
      this.$refs.dFrom.$refs.dynamicForm.resetFields()
      this.$nextTick(() => {
        this.initBasicAttributes()
      })
      this.$emit('cancel')
      this.isEdit = true
    },
    edit() {
      const formVal = JSON.parse(JSON.stringify(this.$refs.dFrom.form))
      this.saveActionlog.valObj.oldVal = formVal
      this.$emit('edit')
      this.isEdit = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.basic-attributes {
  height: calc(100vh - 315px);
  position: relative;
  .from {
    width: 90%;
    padding-top: 30px;
  }
  .operate {
    position: absolute;
    top: 0;
    right: 6px;
    i {
      margin-left: 12px;
      cursor: pointer;
    }
  }
}
</style>
